<template>
    <div class="col-lg-12 col-md-12 col-sm-12" style="margin: auto;">
        <div class="col-lg-12 col-md-12 col-sm-12">
            <div class="col-lg-1 col-md-1 col-sm-1"></div>
            <div class="col-lg-10 col-md-10 col-sm-10" style="">
                <div class="col-lg-12 col-md-12 col-sm-12 alert alert-success" role="alert" :style="{display:showtips}">
                    {{ tips }}
                </div>
                <div class="col-lg-12 col-md-12 col-sm-12 alert alert-danger" role="alert" :style="{display:showlogin}">
                    未登录！请先 <a href="/login">登录</a>
                </div>
                <div class="col-lg-5 col-md-5 col-sm-12" style="height: 300px;">
                    <img :src="detail.imgsrc" width="100%">
                </div>
                <div class="col-lg-7 col-md-7 col-sm-12" style="height: 300px;">

                    <h2>{{ detail.name }}</h2>
                    <p style="padding-top:15px">单价：{{ detail.price/100 }}</p>
                    <p>运费：包邮</p>
                    <p>
                        数量：
                        <input type="number" style="width:35px;height:25px" min="1" step="1" :value="goodsnum">
                    </p>
                    <p>
                        <input type="button" class="designer-button" value="购物车"
                               data-toggle="popover" title="Popover title"
                               data-content="And here's some amazing content. It's very engaging. Right?"
                               @click="addCart(detail.id)">
                        <input type="button" class="price-button" value="立即购买" @click="buy(detail.id)">
                    </p>
                    <p style="padding-top:30px">服务承诺: 保证正品 赠运险费 七天包退</p>
                </div>
            </div>
        </div>
        <div class="col-lg-1 col-md-1 col-sm-1 seat"></div>
        <div class="col-lg-10 col-md-10 col-sm-10" style="border:solid 1px #ccc">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="height:50px;">
                <button @click="changeColor1" :style="{background:buttoncolor1}" style="outline:none;width:120px;height:50px;border: solid 1px #ccc;">商品介绍</button>
                <button @click="changeColor2" :style="{background:buttoncolor2}" style="outline:none;width:120px;height:50px;border: solid 1px #ccc;">买家评价</button>
            </div>
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="top:10px" :style="{display:showdetail}">
                <h2>&nbsp;&nbsp;{{ detail.detail }}</h2>
            </div>

            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 assess" :style="{display:showassess}">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="height:200px">
                    <div class="alert alert-danger" role="alert" style="width:100%" :style="{display:ass_dis}" >
                        未登录 <a href="/login">去登陆</a>
                    </div>
                    <input type="text" v-model="ass.ass_con"
                           class="form-control bottom-20" placeholder="评价">
                    <input type="number" v-model="ass.ass_score" class="form-control bottom-20"
                           placeholder="评分（满分100）">
                    <button type="button" class="btn btn-order bottom-20"
                            style="float:right" @click="assessCase">确认</button>
                </div>
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 assess" v-for="ass in assess">
                    <div class="col-lg-1 col-md-2 col-sm-12 col-xs-12">
                        <img :src="ass.userhead" class="assess_head">
                    </div>
                    <div class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
                        <div class="col-lg-12 col-md-12"><span class="assess_span">用户：{{ ass.nickname }}</span></div>
                        <div class="col-lg-12 col-md-12"><span class="assess_span">评价：{{ ass.assess_con }}</span></div>
                    </div>
                    <div class="col-lg-2 col-md-2 col-sm-12 col-xs-12">
                        <div class="col-lg-12 col-md-12">
                            <span class="assess_span">评分：{{ ass.score }}</span>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<style>
    @media (max-width:700px){
        .seat{
            height: 0px;
        }
        .assess_head{
            width: 51px;
            border-radius: 50%;
            float:left
        }
    }
    @media (min-width:700px){
        .seat{
            height: 300px;
        }
        .assess_head{
            width: 51px;
            border-radius: 50%;
            float:right
        }
    }
    .assess{
        position: relative;
        padding-top: 10px;
        padding-bottom:10px;
        padding-left:0px;
        padding-right:0px;
        border:solid 1px #ccc;
        border-bottom:none !important;
    }
    .assess_span{
        color:#999;
        font-size:1.2em
    }


</style>
<script>

    /**
    *获取路径的参数
    **/
    function getQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var r = window.location.search.substr(1).match(reg);
        if (r != null)
        return unescape(r[2]);
        return null;
    }

    export default{
        data(){
            return{
                id: '',
                detail:'',
                assess:'',
                buttoncolor1:'#ccc',
                buttoncolor2:'white',
                goodsnum:1,
                tips:'添加购物车成功！！！',
                showtips:'none',
                showlogin:'none',
                showdetail:'inline-block',
                showassess:'none',
                ass_dis:'none',
                ass:{
                    ass_con:'',
                    ass_score:'',
                    caseid:''
                }
            }
        },
        components:{

        },
        created(){
            var _this = this;
            this.id = getQueryString('id')
            var data = {'id': this.id}
            this.$http.post('/getgoodsdetail', data)
                .then(function(res){
                    _this.detail = res.body.mess[0];
                    _this.assess = res.body.assess;
                });
        },
        methods:{
            changeColor1 : function() {
               this.buttoncolor1 = '#ccc';
               this.buttoncolor2 = 'white';
               this.showdetail = 'inline-block';
               this.showassess = 'none';
            },
            changeColor2 : function() {
               this.buttoncolor2 = '#ccc';
               this.buttoncolor1 = 'white';
               this.showdetail = 'none';
               this.showassess = 'inline-block';
            },
            addCart: function(id){
                var _this = this;
                var data = {
                    'id':id,
                    'num':this.goodsnum
                }
                this.$http.post('/addCart', data)
                    .then(function(res){
                        if(res.body.nologin){
                            _this.showlogin = 'inline-block'
                        }else{
                            _this.showtips = 'inline-block'
                        }
                    });
            },
            buy: function(id){
                var _this = this;
                this.$http.get('/buynow?id='+id)
                    .then(function(res){
                        console.log(res.body);
                        if(res.body.islogin){
                            window.location.href = '/buy_now?id='+id;
                        }else{
                            _this.showlogin = 'inline-block'
                        }
                    });;

            },
            assessCase: function(){

            }
        }
    }
</script>
